<template>
    <div id="drugmanagement">
      <div class="head">
        <div class="left">
          <router-link to="/DrugManagement/DrugManagementAdd"><i class="el-icon-plus"></i>添加</router-link>
        </div>
        <div class="right">
          <el-input v-model="input_name" placeholder="请输入供应商"></el-input>
          <el-input v-model="input_tel" placeholder="请输入门店"></el-input>
          <el-input v-model="input_tel" placeholder="请输入药品"></el-input>
          <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
        </div>
      </div>
        
      <div class="content">
        <el-table :data="tableData" style="width: 100%; background-color: black;">
            <el-table-column
                prop="name"
                label="药品名称"
                width="180">
            </el-table-column>
            <el-table-column
                prop="price"
                label="价格"
                width="180">
            </el-table-column>
            <el-table-column
                prop="store"
                label="所属门店">
            </el-table-column>
            <el-table-column
                prop="stock"
                label="库存数量">
            </el-table-column>
            <el-table-column width="200px" label="详情">
              <template slot-scope="scope">
                <router-link to="/DrugManagement/DrugManagementView"><el-button
                  size="mini"
                  @click="handleEdit(scope.$index, scope.row)">查看</el-button></router-link>
                  
              </template>
          </el-table-column>
            <el-table-column
                prop="check"
                label="审核">
                <template slot="header" >
                  <el-dropdown @command="handleCommand3">
                    <span class="el-dropdown-link">
                      审核<i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown" >
                      <el-dropdown-item command="pending">待审核</el-dropdown-item>
                      <el-dropdown-item command="fall">审核未通过</el-dropdown-item>
                      <el-dropdown-item command="success">审核通过</el-dropdown-item>                     
                                        
                    </el-dropdown-menu>
                  </el-dropdown>
                </template>
            </el-table-column>
           
            <el-table-column width="200px" label="操作">
              <template slot-scope="scope">
                <router-link to="/DrugManagent/DrugManagementEdit"><el-button
                  size="mini"
                  @click="handleEdit(scope.$index, scope.row)">编辑</el-button></router-link>
                  <el-button
                  size="mini"
                  type="danger"
                  @click="handleDelete(scope.row.id)">删除</el-button>
              </template>
          </el-table-column>
        </el-table>
        <div class="bottom">
          <el-pagination
            background
            layout="prev, pager, next"
            :total="1000">
          </el-pagination>
        </div>
      </div>    
    </div>
    
</template>
<script>
   export default {
      data() {
        return {
          input_name:'',
          input_tel:'',
          tableData: [{
            id: '1',
            name: '布洛芬',
            price: '12',
            store: '旗舰店',
            stock: 'n',
            details: '查看',
            
            check: '待审核',
            op: '修改'
          }, {
            id: '2',
            name: '布洛芬',
            price: '12',
            store: '旗舰店',
            stock: 'n',
            details: '查看',
            check: '待审核',
            op: '修改'
          }, {
            id: '3',
            name: '布洛芬',
            price: '12',
            store: '旗舰店',
            stock: 'n',
            details: '查看',
            check: '待审核',
            op: '修改'
          }, {
            id: '4',
            name: '布洛芬',
            price: '12',
            store: '旗舰店',
            stock: 'n',
            details: '查看',
            check: '待审核',
            op: '修改'
          }, {
            id: '4',
            name: '布洛芬',
            price: '12',
            store: '旗舰店',
            stock: 'n',
            details: '查看',
            check: '待审核',
            op: '修改'
          }, {
            name: '布洛芬',
            price: '12',
            store: '旗舰店',
            stock: 'n',
            details: '查看',
            check: '待审核',
            op: '修改'
          }, {
            id: '6',
            name: '布洛芬',
            price: '12',
            store: '旗舰店',
            stock: 'n',
            details: '查看',
            check: '审核未通过',
            op: '修改'
          }, {
            id: '7',
            name: '布洛芬',
            price: '12',
            store: '旗舰店',
            stock: 'n',
            details: '查看',
            check: '审核通过',
            op: '修改'
          }]
        }
      },
      methods: {
        search() {
          if(this.input_name === '' || this.input_tel === '') {
            alert("内容不能为空")
            return;
          }
          // console.log(this.input_name + this.input_tel)
          this.$confirm('你确定要执行此操作吗', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
            center: true
          }).then(() => {
            this.$message({
              type: 'success',
              message: '搜索成功!'
            });
            this.tableData = this.tableData.filter(item => item.name === this.input_name && item.tel === this.input_tel);
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消搜索'
            });
          });
        },
        opens() {
          this.$confirm('你确定要执行此操作吗', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
            center: true
          }).then(() => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });
          });
        },
         // 修改方法
         handleEdit(index, row) {
          this.$router.push("/UserManagement/Manager/ManagerModify")
          console.log(index, row);
        },
        // 删除方法
        handleDelete(id) {
          this.$confirm('你确定要删除此数据吗', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
            center: true
          }).then(() => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.tableData = this.tableData.filter(item => item.id != id);
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });
          });
        },
        // 下拉菜单方法
        handleCommand3(command) {
          if(command === 'pending') {
            this.tableData = this.tableData.filter(item => item.check === "待审核")
          }
          if(command === 'fall') {
            this.tableData = this.tableData.filter(item => item.check === "审核未通过")
          }
          if(command === 'success') {
            this.tableData = this.tableData.filter(item => item.check === "审核通过")
          }
          // this.$message('click on item ' + command);
        },
      }
    }
  </script>

<style lang="less">
  #drugmanagement {
    height: 100%;
    .content {      
      margin-left: 30px;
      margin-right: 30px;
    }
    .head {
      display: flex;
      justify-content: space-between;
      margin: 30px;
      .left {
        width: 90px;
        height: 40px;
        background-color: #0f6bb1;
        border-radius: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        a {
          margin: auto;
          color: white;
        }
      }
      .right {
        .el-input {
          width: 160px; 
          margin-right: 30px; 
          border-radius: 50px;
        }
      }
    }
  }

</style>